<template>
    <div>
        <div class="login_form">
            <div class="form-group">
                <div class="input-group login_item phone">
                    <span class="input-group-addon icon iconfont icon-wode" id="basic-addon1"></span>
                    <input type="tel" class="form-control" placeholder="请输入11位手机号" aria-describedby="basic-addon1"
                           v-model="login.phone" @blur="checkPhone">
                </div>
                <p class="error" v-show="errorInfo.phone.error">{{ errorInfo.phone.msg }}</p>
            </div>
            <div class="form-group">
                <div class="input-group login_item password">
                    <span class="input-group-addon iconfont icon-yaochi" id="basic-addon2"></span>
                    <input type="password" class="form-control" placeholder="请输入6-20位密码" aria-describedby="basic-addon2"
                           v-model="login.password" @blur="checkPw">
                </div>
                <p class="error" v-show="errorInfo.password.error">{{ errorInfo.password.msg }}</p>
            </div>
            <div class="form-group">
                <div class="login_item clearfix">
                    <input class="form-control checkCode pull-left " type="text" v-model="login.check_code" @blur="checkImgCode">
                    <span class="pull-right code">
                        {{ local_check_code }}
                    </span>
                </div>
                <p class="error" v-show="errorInfo.check_code.error">{{ errorInfo.check_code.msg }}</p>
            </div>
            <div>
                <label class="auto_login" for="auto_login">
                    <input type="checkbox" id="auto_login" v-model="login.isAutoLogin">
                    下次自动登录
                </label>
            </div>
            <button class="login_item login_btn" @click="toLogin">立即登录</button>
            <div id="registerModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog"
                 aria-labelledby="mySmallModalLabel">
                <div class="modal-dialog modal-sm" role="document">
                    <div class="modal-content">
                        {{ successMessage }}
                    </div>
                </div>
            </div>
            <p class="clearfix router">
                <router-link to="/forget-password" class="pull-left findPassword toRegister">忘记密码</router-link>
                <router-link to="/register" class="pull-right toRegister">马上注册
                </router-link>
            </p>
        </div>
    </div>
</template>
<script>
    import axios from 'axios'

    export default {
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      },
      methods: {
        checkPhone () {
          const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
          if (this.login.phone.length === 0) {
            this.errorInfo.phone.error = 1
            this.errorInfo.phone.msg = '手机号不能为空'
          } else if (!reg.test(this.login.phone)) {
            this.errorInfo.phone.error = 1
            this.errorInfo.phone.msg = '手机号有误'
          } else {
            this.errorInfo.phone.error = 0
            this.errorInfo.phone.msg = ''
          }
        },
        checkPw () {
          const reg = /^[0-9A-Za-z]{6,20}$/
          if (this.login.password.length === 0) {
            this.errorInfo.password.error = 1
            this.errorInfo.password.msg = '密码不能为空'
          } else if (!reg.test(this.login.password)) {
            this.errorInfo.password.error = 1
            this.errorInfo.password.msg = '请输入6-20位密码，由字母或数字组成'
          } else {
            this.errorInfo.password.error = 0
            this.errorInfo.password.msg = ''
          }
        },
        checkImgCode () {
          if (this.login.check_code.length === 0) {
            this.errorInfo.check_code.error = 0
            this.errorInfo.check_code.msg = '请输入验证码'
          } else if (this.login.check_code !== this.local_check_code) {
            this.errorInfo.check_code.error = 1
            this.errorInfo.check_code.msg = '验证码有误'
          } else {
            this.errorInfo.check_code.error = 0
            this.errorInfo.check_code.msg = ''
          }
        },
        toLogin () {
          let data = {
            userName: this.login.phone,
            password: this.login.password,
            userCode: this.login.check_code
          }
          data = JSON.stringify(data)
          axios.post(`${window.api}sky/login.action?conditionParam=${data}`).then(response => {
            if (response.data.error) {
              this.isLogin = true
              sessionStorage.setItem('user_session', JSON.stringify(response.data.result))
              if (this.login.isAutoLogin) {
                localStorage.setItem('userInfo', JSON.stringify(data))
              }
              this.successMessage = '登录成功，2秒后跳转至首页'
              window.jQuery('#registerModal').modal('show')
              setTimeout(
                () => {
                  Window.jquery('#registerModal').modal('hide')
                  this.$router.push('demo01')
                }, 2000)
            } else {
              this.successMessage = response.data.msg
              window.jQuery('#registerModal').modal('show')
              setTimeout(
                () => {
                  Window.jquery('#registerModal').modal('hide')
                  this.$router.push('demo01')
                }, 2000)
            }
          }).catch(error => {
            console.log(error)
          })
        }
      },
      mounted () {
        this.local_check_code = ((parseInt(Math.random() * 10000, 10)).toString())
        if (this.local_check_code.length < 4) {
          for (let i = 0; i < 4 - this.local_check_code.length; i += 1) {
            this.local_check_code = `0${this.local_check_code}`
          }
        }
        if (localStorage.getItem('userInfo') !== undefined) {
          const user = JSON.parse(localStorage.getItem('userInfo'))
          const userInfo = JSON.parse(user)
          this.local.phone = userInfo.username
          this.login.password = userInfo.password
        }
      }
    }
</script>
<style>

</style>
